@charset "utf-8";

.index_header {
  width: 96%;
  margin: 0 auto;
  height: 4.4rem;
  background: #fff;
  margin-top: 1rem;
  display: flex;
  border-radius: .5rem;

  .hlist {
    flex: 1;
    text-align: center;
    padding-top: .2rem;
    border-right: 1px solid #eee;
    img {
      width: 2rem;
      height: 2rem;
      margin: 0 auto;
    }

    &:last-child {
      border-right: none;
    }
  }

}

/*列表*/
.item {
  .item_cate {
    text-align: center;
    padding: .5rem;
  }

  .item_list {
    display: flex;
    flex-wrap: wrap;
    padding: 0px .5rem;
    li {
      width: 33.3%;
      padding: .5rem;
      box-sizing: border-box;
      a {
        color: #555;
        text-decoration: none;
      }
      .inner {
        background: #fff;
        width: 100%;
        border-radius: .5rem;
        overflow: hidden;
        img {
          width: 100%;
          height: 6.6rem;
        }
        p {
          padding: .2rem .5rem;
        }
        .title {
          text-align: center;
          font-weight: bold;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

/*侧边栏*/

.left_cate {
  /*css3运动  加过渡效果*/
  transition: all 1s;
  transform: translate(-100%, 0);
  z-index: 2;
  width: 8rem;
  height: 100%;
  position: fixed;
  background: #eee;
  top: 0px;
  left: 0px;
  ul {
    position: absolute;
    height: 100%;
    padding: .5rem;
    z-index: 3;
    background: #eee;
    li {
      line-height: 4.4rem;
    }
  }

  .nav_cate {
    position: absolute;
    right: -4rem;
    background: rgba(132, 128, 128, 0.9);
    top: 42%;
    width: 4rem;
    height: 4rem;
    text-align: center;
    border-radius: 0rem 50% 50% 0rem;
    z-index: 2;
    img {
      width: 1.8rem;
      height: 1.8rem;
      margin-left: -1rem;
      margin-top: .4rem;
    }
    p {
      color: #fff;
      margin-left: -1rem;
      margin-top: -0.5rem
    }
  }
}

/*透明层*/

.bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(132, 128, 128, 0.4);
  left: 0px;
  top: 0px;
  z-index: 1;
  display: none;

}

.cart_num{
  position: absolute;
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  border-radius: 50%;
  right:-0.5rem;
  top:-0.5rem;
  background: red;
  color: #fff;
}
